<template>
  <div id="app">
    <el-container>
      <el-header>电商管理系统页面</el-header>
      <el-container>
        <el-aside width="200px"
          ><el-row class="tac">
            <el-col :span="24">
              <h5></h5>
              <el-menu
                default-active="this.$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item-group>
                  <el-menu-item index="1">
                    <i class="el-icon-location"></i>
                    <span slot="title" @click="products()">商品模块</span>
                  </el-menu-item>
                </el-menu-item-group>
                <el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title" @click="users()">用户模块</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <i class="el-icon-document"></i>
                  <span slot="title" @click="orders()">订单模块</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-setting"></i>
                  <span slot="title" @click="seckills()">秒杀模块</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <i class="el-icon-setting"></i>
                  <span slot="title" @click="productCate()">商品分类</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import { config } from "vue/types/umd";
export default {
  name: "App",
  //刷新token
  created() {
    this.refreshToken();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    products() {
      this.$router.push("/Product");
    },
    users() {
      this.$router.push("/User");
    },
    orders() {
      this.$router.push("/Order");
    },
    seckills() {
      this.$router.push("/Seckill");
    },
    productCate() {
      this.$router.push("/ProductCateGory");
    },
    Login() {
      this.$router.push("/");
    },
    //Vue的定期刷新
    refreshToken() {
      this.refreshTime = setInterval(() => {
        this.axios
          .post(
            "http://localhost:35043/api/User/RefreshToken?guid="+
              window.sessionStorage.getItem('guid')
          )
          .then((res) => {
            if (res.data.code == 200) {
              console.log("刷新Token", res.data.tnToken.tokenStr);
              window.sessionStorage.setItem(
                "token",
                "Bearer" + res.data.tnToken.tokenStr
              );
              config.headers.Authorization =
                window.sessionStorage.getItem("token");
            }
          });
      },100000);
    },
  },
};
</script>

<style>
/*图片预览 缩略图*/
.preview figure {
  float: left;
  width: 30%;
  height: calc(30vw - 0px);
  margin: 1.5%;
}
.preview figure img {
  width: 100%;
}
</style>
